{extend name="public/container"}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item>
                    <el-date-picker
                        v-model="where.date_time"
                        type="daterange"
                        align="right"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="where.keyword" placeholder="手机号/姓名">
                        <el-button slot="append" size="small" type="success" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div class="padding-10">
        <el-table
            :data="rows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                prop="rel_type"
                label="项目类型"
                width="80"
                align="left">
            </el-table-column>

            <el-table-column
                prop="rel_name"
                label="项目名称"
                align="left">
            </el-table-column>

            <el-table-column
                prop="full_name"
                label="团长"
                width="100"
                align="left">
            </el-table-column>

            <el-table-column
                prop="create_time"
                label="开团时间"
                width="140"
                align="left">
            </el-table-column>

            <el-table-column
                prop="success_time"
                label="成团时间"
                width="140"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="success" v-if="scope.row.status == 1"> {{ scope.row.success_time }}</el-link>
                    <el-link :underline="false" type="warning" v-else> - </el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="pink_price"
                label="拼团价格"
                width="80"
                align="left">
            </el-table-column>

            <el-table-column
                prop="pink_nums"
                label="成团人数"
                width="80"
                align="left">
            </el-table-column>

            <el-table-column
                prop="staus_display"
                label="成团状态"
                width="80"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="success" v-if="scope.row.status == 1"> {{ scope.row.status_display }}</el-link>
                    <el-link :underline="false" type="warning" v-else> {{ scope.row.status_display }}</el-link>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                width="130"
                fixed="right"
                align="left">
                <template slot-scope="scope">
                    <el-link size="mini" :underline="false" type="danger" @click="doDetail(scope.row)">拼团详情</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                small
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="rowsCount"
                :page-size="where.limit"
                @current-change="doLoadRows">
            </el-pagination>
        </div>
    </div>

    <el-dialog title="参团详情" :visible.sync="dialogDetailVisible" width="70%" :close-on-click-modal="false">
        <el-table
            :data="detailRows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                prop="pid"
                label="参团身份"
                width="100"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="success" v-if="scope.row.pid == 0"> 团长 </el-link>
                    <el-link :underline="false" type="warning" v-else> 团员 </el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="full_name"
                label="成员姓名"
                align="left">
            </el-table-column>

            <el-table-column
                prop="create_time"
                label="参团时间"
                width="140"
                align="left">
            </el-table-column>

            <el-table-column
                prop="pink_price"
                label="拼团价格"
                align="left">
            </el-table-column>

            <el-table-column
                prop="pay_status_display"
                label="支付状态"
                width="140"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="success" v-if="scope.row.paid_time > 0"> {{ scope.row.pay_status_display }}</el-link>
                    <el-link :underline="false" type="warning" v-else>  {{ scope.row.pay_status_display }} </el-link>
                </template>
            </el-table-column>

        </el-table>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                rowsCount: 0,
                rows: [],
                where: {
                    keyword: '',
                    status:'',
                    pid:0,
                    date_time:'',
                    page:1,
                    limit:pageSize,
                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                loading:false,
                dialogDetailVisible:false,
                detailRows:[]
            }
        },
        methods: {
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
            doDetail (row) {
                this.dialogDetailVisible = true
                axios.get(Url({a:'get_list' , q:{pid:row.id}})).then(res => {
                    this.detailRows =res.data.data
                }).catch(_ => {
                    console.log(_)
                })

                return this.doLoadRows();
            }
        },
        mounted(){
            this.doLoadRows()
        }
    })
</script>
{/block}